/* 
  目标： 了解-Context来跨组价通信，
  需求： 让App组件-直接传数据给SonSon组件
*/

import React, { Component } from 'react';

//  1. React.createContext创建上下文组件
const { Provider, Consumer } = React.createContext();
const { Provider: Provider2, Consumer: Consumer2 } = React.createContext();

console.log(' Provider2 ----->  ', Provider2);
console.log(' Consumer2 ----->  ', Consumer2);

export default class App extends React.Component {
  render() {
    return (
      <div>
        <h1>父组件</h1>
        {/* 2. 使用Provider包住后代组件， 设置value属性传值 */}
        <Provider value={[1, 2, 3]}>
          <Son></Son>
        </Provider>
      </div>
    );
  }
}

class Son extends Component {
  render() {
    return (
      <div>
        <h2> 儿子</h2>
        <SonSon></SonSon>
      </div>
    );
  }
}

class SonSon extends Component {
  render() {
    return (
      <div>
        <h2> 孙子</h2>

        {/*  3. 使用Consumer接收数据 */}
        <Consumer>
          {(data) => {
            // 函数的形参，就是传来的数据
            // 函数需要返回一段jsx
            return <h1>{data}</h1>;
          }}
        </Consumer>
      </div>
    );
  }
}
